// 定义全局注册组件方法  https://blog.csdn.net/Hu560231/article/details/137529217
// 1. 引入vue中的方法
import { defineAsyncComponent } from "vue";

// 2.定义对象 实现方法
const registerComponent = {
  // 定义方法
  install(app) {
    // 批量读取并能导入组件
    let readSrcComponent = import.meta.glob("@/components/*/index.vue");
    // console.log(readSrcComponent);
    /* 
            "/src/components/MyButton/index.vue"
            "/src/components/Text/index.vue"
            ...
        */
    // 获取 readSrcComponent对象中 所有的key值
    const keys = Object.keys(readSrcComponent);
    // console.log(keys);
    // ['/src/components/MyButton/index.vue', '/src/components/Text/index.vue',...]
    // 获取readSrcComponent对象中所有的value值
    const values = Object.values(readSrcComponent);
    // console.log(values);
    /* 
        [
            () => import("/src/components/MyButton/index.vue")
            () => import("/src/components/Text/index.vue")
        ]
        */
    // 遍历对象 实现批量注册组件
    keys.forEach((item, index) => {
      // console.log(item);
      /* 
                /src/components/MyButton/index.vue
                /src/components/Text/index.vue
            */
      // 使用正则替换 原始内容 获取文件名称 一个小括号代表一个$ $1(/src/components) $2(MyButton ... 符合规范的) $3(index.vue)
      const componentName = item.replace(
        /(\/src\/components\/)([a-zA-Z]+)(\/index\.vue)/,
        "$2"
      );
      // console.log(componentName); //  MyButton Text ...
      // 根据index下标 获取value中对应的路径
      const component = values[index];
      // console.log(component);  () => import("/src/components/MyButton/index.vue") ...
      // 调用 app参数 实现全局注册组件
      app.component(componentName, defineAsyncComponent(component));
    });

    // 跟上面方法一样 实现组件样式的全局注册
    // 批量读取并导入所有 组件样式组件
    let readSrcPropComponent = import.meta.glob("@/components/*/prop.vue");
    // console.log(readSrcPropComponent);
    // 所有的key值
    const propKeys = Object.keys(readSrcPropComponent);
    // console.log(propKeys);
    // 获取所有的value值
    const propValues = Object.values(readSrcPropComponent);
    // console.log(propValues);
    // 循环遍历对象实现全局注册样式组件
    propKeys.forEach((item, index) => {
      // 使用正则获取 用户名 并替换成想要的效果 拼接上Prop结尾的名称
      const propComponentName = item.replace(
        /(\/src\/components\/)([a-zA-Z]+)(\/prop\.vue)/,
        "$2Prop"
      );
      // console.log(propComponentName); MyButtonProp...
      // 获取对应的路径根据下标
      const component = propValues[index];

      // 使用app 全局注册样式组件
      app.component(propComponentName, defineAsyncComponent(component));
    });
  },
};

// 最后导出
export default registerComponent;
